<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>时尚网页</title>
    <style>
        .nav a{
            color: #fff; text-decoration: none; margin: 10px; font-size: 14px; padding-left: 20px;
        }
        .hover-orange:hover {
            background-color: #f47e4b !important;
        }
    </style>
</head>
<body style="margin: 0; background-color: #fff5eb;">
    <!-- 头部导航 -->
    <header style="background-color: #f47e4b; height: 80px; display: flex; align-items: center; justify-content: center;">
        <div style="display: flex; align-items: center;">
            <img src="images/logo.png" style="margin-top: 35px;">
            <nav class="nav">
                <a href="#" >穿搭速递</a>
                <a href="#" >时尚大片</a>
                <a href="#" >星着装</a>
                <a href="#" >时尚圈</a>
                <a href="fashion.html" >时尚专栏</a>
                <a href="#" >会员登陆</a>
            </nav>
        </div>
    </header>

    <!-- banner图 -->
        <div style="height: 50px;background-color: rgb(245, 245, 245); box-shadow: 0 4px 6px rgb(201, 201, 201);"></div>

        <div>
            <img src="images/banner.jpg" style="display: flex; justify-content: center;margin: 0 auto;height: auto;width: 770px;margin-top: 6px;margin-bottom: 2px;">
        </div> 

    <!-- 中间图文板块 -->
    <div style="width: 750px; display: flex; justify-content: center; background-color: #f47e4b; margin: 0 auto; padding: 10px;">
        <div style="background-color: #fff; width: 100%;margin: 0 10px; display: flex;">
            <div style="display: flex;flex-direction: column;flex: 1; margin: 10px 5px 10px 10px;">
                <div style="flex: 3;margin-bottom: 5px; display: flex;">
                    <div style="flex: 3;">
                        <img src="images/pic01.jpg" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div style="flex: 2; background-color: black; color: white;  font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center;" class="hover-orange">
                        明星风尚
                    </div>
                </div>
                <div style="flex: 2;margin-bottom: 5px; display: flex;">
                    <div style="flex: 3;">
                        <img src="images/pic02.jpg" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div style="flex: 2; background-color: black; color: white;font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center;" class="hover-orange">
                        时尚博主
                    </div>
                </div>
            </div>
            <div style="display: flex;flex-direction: column;flex: 1;margin: 10px 5px 10px 0;">
                <div style="flex: 2;background-color: #000; margin-bottom: 5px; display: flex;">
                    <div style="flex: 3;">
                        <img src="images/pic03.jpg" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div style="flex: 2; background-color: black; color: white; font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center;" class="hover-orange">
                        流行搭配
                    </div>
                </div>
                <div style="flex: 3;background-color: #0213ff; margin-bottom: 5px; display: flex;">
                    <div style="flex: 3;">
                        <img src="images/pic04.jpg" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div style="flex: 2; background-color: black; color: white;font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center;" class="hover-orange">
                        精选秀场
                    </div>
                </div>
            </div>
            <div style="flex: 1;margin: 10px 10px 15px 0; display: flex;">
                <div style="flex: 2;">
                    <img src="images/pic05.jpg" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <div style="flex: 1; background-color: black; color: white;font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center;" class="hover-orange">
                        环球街拍
                </div>
            </div>

        </div>
    </div>

    <!-- 潮流前沿板块 -->
    <div style="width: 100%; display: flex; flex-direction: column; align-items: center; margin: 20px 0;">
        <div style="background-color: #f47e4b; color: #fff; padding: 5px 10px; margin-bottom: 10px; border: 1px solid #ccc;">潮流前沿/Tidal current</div>
        <div style="max-width: 800px; width: 100%; display: flex; justify-content: space-around; background-color: #fff;padding: 10px;">
            <div style="text-align: center; width: 23%; border: 1px solid #ccc;">
                <img src="images/match01.jpg" style="width: 100%; border: 1px solid #ccc;">
                <p style="margin: 5px 0;">潮流饰品</p>
                <button style="background-color: #f47e4b; color: #fff; border: none; padding-left: 0;padding-right: 5px;display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 1px solid #ccc;margin-bottom: 10px; ">
                    <img src="images/gouwu.jpg" style="margin-right: 10px;">快速购买通道
                </button>
            </div>
            <div style="text-align: center; width: 23%; border: 1px solid #ccc;">
                <img src="images/match02.jpg" style="width: 100%; border: 1px solid #ccc;">
                <p style="margin: 5px 0;">时尚女鞋</p>
                <button style="background-color: #f47e4b; color: #fff; border: none; padding-left: 0;padding-right: 5px;display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 1px solid #ccc;">
                    <img src="images/gouwu.jpg" style="margin-right: 5px;">快速购买通道
                </button>
            </div>
            <div style="text-align: center; width: 23%; border: 1px solid #ccc;">
                <img src="images/match03.jpg" style="width: 100%; border: 1px solid #ccc;">
                <p style="margin: 5px 0;">精品包包</p>
                <button style="background-color: #f47e4b; color: #fff; border: none; padding-left: 0;padding-right: 5px;display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 1px solid #ccc;">
                    <img src="images/gouwu.jpg" style="margin-right: 5px;">快速购买通道
                </button>
            </div>
            <div style="text-align: center; width: 23%; border: 1px solid #ccc;">
                <img src="images/match04.jpg" style="width: 100%; border: 1px solid #ccc;">
                <p style="margin: 5px 0;">百搭衣帽</p>
                <button style="background-color: #f47e4b; color: #fff; border: none; padding-left: 0;padding-right: 5px;display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 1px solid #ccc;">
                    <img src="images/gouwu.jpg" style="margin-right: 5px;">快速购买通道
                </button>
            </div>
        </div>
    </div>

    <!-- 底部版权 -->
    <footer style="background-color: #000; color: #fff; text-align: center; padding: 10px 0; font-size: 12px; margin-top: 50px;">
        <p>Copyright©2006-2016 CHAOLIUFUSHICOM, All right reserved.</p>
        <p>2001-2008版权所有 湘ICP备856p备 13385453</p>
    </footer>
</body>
</html>
